<template>   
  <div class="back">
<!--
        <img src="../../static/img/login.jpeg">
-->
    <div style="height: 150px">

    </div>

    <div style="
      margin-left: 40%;
       margin-right: 40%;float:left">
      <div >
<!--
        <img src="../../static/img/login2.png" style="height: 200px;width: 200px">
-->
      </div>
      <div class="loginStyle">
        <div style="margin: 35px;">
          <el-form v-model="loginForm" style="text-align: right">
            <div >
              用户名:
              <el-input  type="text" v-model="loginForm.name"  autocomplete="off"></el-input>
            </div>
            <div>
              <br/>
              <label>密码:</label>
              <el-input type="password" v-model="loginForm.passWord" autocomplete="off"></el-input>
            </div>
            <br/>
            <el-button round @click="submit" type="success"  style="text-align: center;width: 200px">登陆</el-button>
          </el-form>

        </div>

      </div>

    </div>

  </div>
</template>

<style>
  .el-col{
    font-size: 20px ;color:steelblue
  }
  .el-input{
    width:200px;
    outline:none;
    border:1px solid #ffe9a2;
    border-radius:3px;
    font-size:1.4em;
    outline:0;
    color:#986655;
  }
  .back{
    background: url("../../static/img/login.jpeg");
    width: 100%;
    height: 100%;
  }

  .loginStyle{
    text-align: left;
/*    margin: 10px auto;
    padding: 10px;*/
/*
    position:relative;
*/
    width: 330px;
    height: 280px;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#1583f3), to(#e6e3ff), color-stop(.1, #4e82ff));
    border-top: 2px solid #0152cc;
    border-right: 1px solid #1c67cc;
    border-left: #479eff;
    -webkit-border-bottom-right-radius: 60px 60px;
    -webkit-box-shadow: 3px 2px 2px rgba(79, 255, 252, 0.2);
    /*
        border:3px solid #76f8ff;
    */
    box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
  }
</style>

<script>

    export default {
        data() {
            return {
              loginForm:{
                name:'',
                passWord:'',
                id:'',
              }

            }
        },
      methods:{
          submit:function () {
            this.$axios.post("/api/userLogin",this.loginForm).then(Response=>{
                  if (Response.data.code =="0"){
                    console.log(Response.data.obj);
                    window.localStorage.setItem("username",Response.data.obj.name);
                    window.localStorage.setItem("EmployeeID",Response.data.obj.id);
                    this.$router.push({path: '/AppBar'});
                  } else {
                    this.$notify({
                      message: Response.data.msg,
                      duration: 1000
                    });
                  }
            })
          }
      }
    }

</script>
